<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // let h1Dom = null;
        // let msg = "初始化数据";

        // window.onload = function () {
        //     // 补充代码
        //     h1Dom = document.querySelector("#app>h1");
        //     let textDom = document.querySelector("#app>input[type=text]");

        //     h1Dom.innerHTML = msg;
        //     textDom.value = msg;
        // }
        // function changeMsg(nv){
        //     // console.log(nv);
        //     // console.log(h1Dom);
        //     msg = nv;
        //     h1Dom.innerHTML = nv;
        // }
        // function showMsgTip(){
        //     alert(msg);
        // }
    </script>
    <script>
        window.onload = function(){
            let info = "测试初始数据";

            let h1Dom = document.querySelector("#root>h1");
            let textDom = document.querySelector("#root>input[type=text]");
            let btnDom = document.querySelector("#root>input[type=button]");

            h1Dom.innerHTML = info;
            textDom.value = info;

            textDom.addEventListener("input",function(){
                // console.log(1);
                // console.log(this);
                // console.log(this.value);
                info = this.value;
                h1Dom.innerHTML = this.value;
            })

            btnDom.addEventListener("click",function(){
                alert(info);
            })
        }
    </script>
</head>

<body>
    <div id="app">
        <h1></h1>
        <!-- 
            对于输入型文本框而言，w3c规范了一个特殊的事件 该事件为 input
            标签上使用 oninput 进行事件绑定
            该事件会即是触发输入型文本框的数据变动操作
        -->
        <input type="text" oninput="changeMsg(this.value)">
        <input type="button" value="提示msg数据" onclick="showMsgTip()">
    </div>
    <hr>
    <div id="root">
        <h1></h1>
        <input type="text">
        <input type="button" value="提示msg数据">
    </div>
</body>

</html>